<template>
  <div id="undo-food">
    <ContentField>
      <template v-slot:content-field-card-name>待完成</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="undo-food-body" style="position: relative">
          <el-table
            :data="unfinish_order_item_list"
            stripe
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="foodName" label="菜品名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="success"
                  round
                  @click="finishBtnClick(scope.row)"
                  >确认完成</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, reactive } from "vue";
import { ElNotification } from "element-plus";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    store.dispatch("get_all_unfinished_order_item", {
      token: store.state.user.jwt_token,
    });

    let unfinish_order_item_list = computed(() => {
      let res = store.state.order_item.unfinished_order_item_list;
      res.forEach((element) => {
        element.create_time = Date.parse(element.createTime);
      });
      res.sort((a, b) => {
        return a.create_time - b.create_time;
      });
      return res;
    });

    let curOrderItem = reactive({});

    let bindCurOrderItem = (t) => {
      curOrderItem.id = t.id;
      curOrderItem.orderId = t.orderId;
      curOrderItem.foodId = t.foodId;
      curOrderItem.chefId = t.chefId;
      curOrderItem.createTime = t.createTime;
      curOrderItem.finishTime = t.finishTime;
      curOrderItem.order_id = t.orderId;
      curOrderItem.food_id = t.foodId;
      curOrderItem.chef_id = t.chefId;
      curOrderItem.create_time = t.createTime;
      curOrderItem.finish_time = t.finishTime;
    };

    let finishBtnClick = (row) => {
      store.dispatch("finish_order_item", {
        token: store.state.user.jwt_token,
        order_item_id: row.id,
        chef_id: store.state.chef.id,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "菜品完成",
              offset: 100,
            });
            store.dispatch("get_all_unfinished_order_item", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Success",
              message: "操作失败：" + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    return {
      unfinish_order_item_list,
      bindCurOrderItem,
      curOrderItem,
      finishBtnClick,
    };
  },
};
</script>

<style scoped></style>
